<template>
	<view class="page" v-if="!loading">
		<view class="gift_image">
			<img :src="setting.gift.image!=''? setting.gift.image: require('@/static/vote/zengli.png')" alt="">
		</view>
		<view class="times">
			<view class="">
				{{chance.quali==1?detail.stats.first_num:detail.stats.last_num}}<span class="unit">{{data.settings.vote_unit}}</span> <span class="refresh" @click="initVotes">刷新</span></span>
			</view>
		</view>
		<view class="nums">
			<view class="num" v-for="(item,index) in nums" @click="select(item)" :class="{'secleted':selectNum==item}">
				{{item}}礼物
			</view>
		</view>
		<view class="msg">
			提示：每人每天最多可送{{setting.gift.limit}}次
		</view>
		<view class="action_text">
			为<span>{{queryData.name}}</span>送<span>{{selectNum}}</span>礼物=<span>{{setting.gift.exchange * selectNum}}</span>票
		</view>
		<view class="money">
			所需：{{sunPrice}}
		</view>
		<view class="btn" :class="{'disabled':isAllow}" @click="buyGold">
			确认支付
		</view>
		
		
		<view class="modal_guide fadeIn_an" v-if="modalGuide">
			<view class="content">
				<view class="text">请前往千帆App，送礼物</view>
				<view class="btn_con">
					<view class="cancal" @click="modalGuide=false">取消</view>
					<view class="confirm" @click="handlerOpen">前往</view>
				</view>
			</view>
		</view>
		<view class="modal_guide fadeIn_an" v-if="modalGift">
			<view class="content" style="height: 420rpx;">
				 <view class="text1">
					赠送成功
				 </view>
				 <view class="icon">
					 <img :src="setting.gift.popup || require('@/static/vote/gift_sucess.png')" alt=""/>
				 </view>
				 <view class="close" @click="modalGift=false">
				 	<img src="~@/static/guess/close.png" alt="">
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getVoteGift,buyVoteGift,getVoteWorkInfo,chance} from '@/api/api'
	import {isIos,isQianfan,newJumpUrl} from '@/until/QFH5.js'
	export default {
		computed:{
			sunPrice(){
					let price = this.selectNum * this.setting.gift.cash
					let priceGold = this.selectNum * this.setting.gift.gold
					let str = ''
					if(price>0){
						str = str+'￥'+ price
					}
					if(priceGold>0){
						if(str!='')str+=' + '
						str = str+priceGold+' 金币'
					} 
					return str
				}
			
		},
		data(){
			return{
				nums:[],
				data:{settings:{vote_unit:''}},
				setting:{},
				queryData:{},
				selectNum:1,
				isAllow:false,
				chance:'',
				detail:'',
				
				goldStatus:false,
				buyData:'',
				
				modalGuide:false,
				modalGift:false,
				loading:true
			}
		},
		methods:{
			handlerOpen(){
				let loactionUrl = window.location.href
				let actid = uni.getStorageSync('actid')|| null
				// if(loactionUrl.indexOf('&id=')==-1)//兼容其他页面打开app
				// 	loactionUrl = loactionUrl +"&id=" + actid
				if(loactionUrl.indexOf('id=')==-1){//兼容其他页面打开app
 					if( loactionUrl.indexOf('?')==-1){
                        loactionUrl =loactionUrl+"?id=" + actid
                    }else{
                        loactionUrl =loactionUrl+"&id=" + actid
                    }
                }
				let param = encodeURIComponent(loactionUrl)
				let url = newJumpUrl(0,param)
				window.location.href = url
			},
			initWorksChance(){
				chance({actid:this.queryData.actid}).then(res=>{
					this.chance = res.data
					this.initVotes()
					
				})
			},
			initVotes(){
				let obj = {plugin:'vote',work_id:this.queryData.work_id,actid:this.queryData.actid}
				getVoteWorkInfo(obj).then(res=>{
					this.detail = res.data.info
					this.loading = false
				})
			},
			select(val){
				this.selectNum = val
			},
			buyGold(){
				if(!isQianfan()){
					this.modalGuide = true
					return
				}
				if(this.isAllow){
					uni.showToast({
						title:'今日赠送已上限，改日再来赠送吧！',icon:'none'
					})
					return
				}
				
				let obj = {works_id:this.queryData.work_id,gift_num:this.selectNum,plugin:'vote',actid:this.queryData.actid}
				buyVoteGift(obj).then(res=>{
					if(res.code==0){
						this.buyData = res.data.buy_gift
						this.appBuy()
					}
				})
			},
			appBuy(){
				let _this = this
				if(this.goldStatus){
					return
				}
				this.goldStatus = true
				QFH5.Order(JSON.stringify(this.buyData), function(state, data) {
					setTimeout(()=>{_this.goldStatus=false},3000)
					if (state == 1) {
						// 下单成功
						QFH5.jumpPayOrder(parseInt(data.order_id), function(state, data) {
							 if (state == 1) {
								 _this.modalGift = true
								_this.initVotes()
								_this.init()
							} else {
								// TODO 重新使用数据库中的order_id唤起APP支付即可，无需再次下单
							}
						})
					} else {
						alert('订单生成失败:' + data.error);
					}
				})
			},
			init(){
				getVoteGift({plugin:'vote',actid:this.$route.query.actid}).then(res=>{
					this.setting = res.data
					let max = Number(res.data.gift.max)
					let arrs = [1,5,10,15,20,25,30,50,100]
					let arr = arrs.filter(item=>{return item<=max})
					if(arr[arr.length-1]!=max){
						arr.push(max)
					}
					this.nums = arr
					this.isAllow = res.data.user_gift_num >= res.data.gift.limit?true:false
				})
			}
		},
		mounted() {
			this.$setTitle('赠礼')
			this.data = JSON.parse(localStorage.getItem(this.$route.query.actid+'ActivityData'))
			this.init()
			this.initWorksChance()
		},
		onLoad(op){
			this.queryData = op
			this.$store.commit('SETACTIVITYNAME', 'vote')
			this.$store.commit('SETACTIVITYTYPE', 'vote')
		}
	}
</script>

<style lang="scss" scoped>
	.modal_guide{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		.content{
			position: relative;
			width: 640rpx;
			height: 484rpx;
			border-radius: 30rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 3rpx 10rpx 1rpx rgba(0,0,0,0.2);
			.text{
				margin-top: 158rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			 
			.btn_con{
				margin-top: 130rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				&>view{
					width: 240rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: #FE7F00;
					border-radius: 43rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin: 0 25rpx;
				}
				.cancal{
					border: 1rpx solid #717D8F;
					width: 238rpx;
					height: 88rpx;
					line-height: 88rpx;
					color: #717D8F;
					background: #FFFFFF;
				}
			}
			.close{
				position: absolute;
				bottom: -125rpx;
				left: 50%;
				width: 70rpx;
				height: 70rpx;
				margin-left: -35rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text1{
				margin: 60rpx 0 30rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.icon{
				line-height: 0;
				width: 200rpx;
				height: 200rpx;
				margin: 0 auto;
				img{
					width:100%;
					height: 100%;
				}
			}
		}
 
	}
	.page {
		padding: 1rpx 0 0 0;
		margin-top: -1rpx;

		.gift_image {
			width: 200rpx;
			height: 200rpx;
			line-height: 0;
			margin: 30rpx auto 0;
			img {
				width: 100%;
				height: 100%;
			}
		}

		.times {
			position: relative;
			text-align: center;
			height: 67rpx;
			line-height: 67rpx;
			margin-top: 20rpx;
			&>view{
				margin: 0 auto;
				font-size: 48rpx;
				color: #FE7F00;
				display: inline-block;
				transform: translateX(44rpx);
				
				.unit {
					color: #222222;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 30rpx;
				}
				
				.refresh {
					display: inline-block;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #3B76FF;
					margin-left: 8rpx;
				}
			}

		}
		.nums{
			margin-top: 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			width: 640rpx;
			padding: 0 55rpx;
			.num{
				width: 180rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #F2F2F2;
				border-radius: 10rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin:0 50rpx 29rpx 0;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			.secleted{
				background: #FE7F00;
				color: #FFFFFF;
			}
		}
		.msg{
			height: 33rpx;
			line-height: 33rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #F83838;
			margin-left: 30rpx;
		}
		.action_text{
			margin-top: 40rpx;
			text-align: center;
			line-height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			span{
				color: #FE7F00;
				line-height: 42rpx;
				font-size: 30rpx;
				margin: 8rpx;
			}
		}
		.money{
			margin-top: 20rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}
		.btn{
			width: 460rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #FE7F00;
			border-radius: 45rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			margin: 20rpx auto 0;
		}
		.disabled{
			background: #cdcdcd;
		}

	}
</style>